<template>
  <div class="flex flex-wrap gap-8 justify-center">
    <div v-for="item in articles" :key="item.articleId" class="card card-compact  shadow-xl w-96 glass">
      <figure><img class="w-full h-52 cursor-pointer" :src="item.articleImage" alt="articleImage"
                   @click="navigateTo({path:`/article/${item.articleId}`})"/></figure>
      <div class="card-body flex flex-col justify-between">
        <h2 class="card-title flex h-12">
          <span class="titleCustom" v-html="item.articleTitle "/>
          <span class="badge badge-secondary ml-auto" v-show="item.isTop == 1">
            Top
          </span>
        </h2>
        <div>
          <div class="card-actions flex justify-between items-center">
            <!-- 分类和标签信息 -->
            <div class="flex  items-center">
              <div class="flex items-center">
                <Icon name="iconamoon:category-thin" class="text-red-500"/>
                <div class="flex items-center">
                  <span class="text-xs mr-1 ml-1">{{ item.categoryName }}</span>
                </div>
              </div>
              <div class="flex items-center ml-2">
                <Icon name="ph:tag" class="text-orange-500"/>
                <div class="flex items-center">
                  <template v-if="item.tags && item.tags.length">
                  <span v-for="(tag, index) in item.tags.slice(0, 2)" :key="index" class="text-xs ml-1">
                  {{ tag }}<span v-if="index !== item.tags.slice(0, 2).length - 1">,</span>
                  </span>
                    <span v-if="item.tags.length > 2" class="text-xs mr-1">...</span>
                  </template>
                </div>
              </div>
            </div>
            <!-- 点赞和浏览量信息 -->
            <div class="flex items-center text-xs ml-auto">
              <div class="flex items-center mx-4">
                <Icon name="ph:eye-light" size="22" class="mr-1"/>
                {{ item.viewedCount }}
              </div>
              <div class="flex items-center">
                <Icon
                    :name="item.isLiked ? 'twemoji:beating-heart' : 'ph:heart-light'"
                    size="22"
                    class="cursor-pointer mr-1"
                    @click="handleThumbUp(item)"/>
                {{ item.likedCount }}
              </div>
            </div>
          </div>
          <div class="card-actions flex justify-between items-center ">
            <!-- 卡片作者信息 -->
            <div class="flex items-center ">
              <div class="avatar mr-2 ">
                <div class="w-10 rounded">
                  <img :src="item.avatar" alt="avatar"/>
                </div>
              </div>
              <div class="card-meta">
                <p class="text-xs">{{ item.createBy }}</p>
                <p class="text-xs">{{ item.createTime }}</p>
              </div>
            </div>
            <!-- Read按钮 -->
            <div class="action">
              <NuxtLink :to="`/article/${item.articleId}`">
                <button class="btn btn-sm btn-outline btn-success" @click="handleViewArticle(item.articleId)">Read</button>
              </NuxtLink>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import type {BlogArticleWebVO} from "~/api/article/types";
import type {PropType} from "vue";
import {like, view} from "~/api/article";

defineProps({
  articles: {
    type: Array as PropType<BlogArticleWebVO[]>,
  },
});

const handleThumbUp = async (article: BlogArticleWebVO) => {
  const {data: res} = await useAsyncData("ArticleCardListLike", () =>
      like(article.articleId)
  );
  if (res.value?.code == 200) {
    if (article.isLiked) {
      article.isLiked = false;
      article.likedCount -= 1;
    } else {
      article.isLiked = true;
      article.likedCount += 1;
    }
  }
};
// 浏览文章
const handleViewArticle = async (articleId:string|number) => {
  await useAsyncData("viewArticleDetail", () =>
      view(articleId)
  );
};
</script>

<style lang="less" scoped>
.titleCustom {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2; /* 限制行数为 2 行 */
  -webkit-box-orient: vertical;
}

.card {
  width: calc((100% - 3 * 1.5rem) / 3);
}

@media screen and (max-width: 1024px) {
  .card {
    width: calc((100% - 2 * 1.5rem) / 2);
  }
}

@media screen and (max-width: 768px) {
  .card {
    width: 100%;
  }
}

</style>
